<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Number List</title>  
<style>  
    .number-list {  
        display: flex;  
        flex-wrap: wrap;  
        justify-content: flex-start;  
        list-style: none;  
        padding: 0;  
        margin: 0;  
    }  
  
    .number-list li {  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        width: 30px;  
        height: 30px;  
        border: 1px solid #ccc;  
        background-color: #fff;  
        margin-right: 5px;  
        margin-bottom: 5px;  
        color: green;  
        font-weight: bold;  
    }  
  
    .total-count {  
        font-weight: bold;  
        margin-bottom: 10px;  
    }  
</style>  
</head>  
<body>  
  
<div>  
    <span class="total-count">共1000条</span>  
    <ul class="number-list">  
        <!-- 你可以手动添加更多的li元素，或者通过后端代码动态生成 -->  
        <li>1</li>  
        <li>2</li>  
        <li>3</li>  
        <!-- ... 以此类推，直到你想要的数字 -->  
        <li>50</li>  
    </ul>  
</div>  
  
</body>  
</html>